<template>
	<view class="full-container">
		<custom-nav title="详细数据"></custom-nav>
		<view class="pb20 pl20 pr20 pt20 backFa">
			<view class="main-color fs30 fwb mb10">{{ formName }}</view>
			<view class="mt10 info-color f24">共收集{{ submitCount }}份</view>
			<view class="mt10 info-color f24"
				>有效{{ achieveCount }}份, 其中确认中{{ processingCount }}份,
				作废中{{ invalidingCount }}份, 无效{{ invalidCount }}份</view
			>
		</view>

		<view class="backf pb20 pt10 pt20">
			<view class="df ac pl10 pr10 pb20">
				<button
					class="default-button"
					v-for="item in tabList"
					:class="item.value === activeTab ? 'active-button' : ''"
					:key="item.value"
					@tap="changeTab(item)"
				>
					{{ item.text }}
				</button>
			</view>
			<view>
				<zb-table
					:fit="true"
					:show-header="true"
					:columns="column"
					:stripe="true"
					:border="true"
					@checkFile="checkFile"
					:data="filterData(data)"
				>
				</zb-table>
			</view>
		</view>
	</view>
</template>

<script>
import { previewFile } from '@/common/utils.js'
export default {
	data() {
		return {
			formKey: '',
			tabList: [
				{ id: 'all', text: '全部', value: '' },
				{ id: 'effective', text: '有效', value: '有效' },
				{ id: 'confirmed', text: '确认中', value: '确认中' },
				{ id: 'cnacencled', text: '作废中', value: '作废中' },
				{ id: 'invalid', text: '无效', value: '无效' },
			],
			activeTab: '',
			fileTypeList: ['序号'],
			myFileData: [],
			tableColumnWidth: [],
			headersObjectData: [],
			formName: '',
			submitCount: 0, // 总收集条数
			achieveCount: 0, // 有效数
			processingCount: 0, // 确认中数
			invalidCount: 0, // 无效数
			invalidingCount: 0, // 作废中数
			column: [
				/*
				          { type:'selection', fixed:true,width:50 },
				          { name: 'name', label: '姓名',fixed:false,width:80,emptyString:'--' },
				          { name: 'age', label: '年纪',sorter:false,align:'right', },
				          { name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
				          { name: 'img', label: '图片',type:"img" },
				          { name: 'address', label: '地址' },
				          { name: 'date', label: '日期',sorter:true },
				          { name: 'province', label: '省份' },
				          { name: 'city', label: '城市' },
				          { name: 'zip', label: '邮编' },
				          { name: 'operation', type:'operation',label: '操作',renders:[
				              {
				                name:'编辑',
				                func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
				              },
				              {
				                name:'删除',
				                type:'warn',
				                func:"dele"
				              },
				            ]},
							*/
			],
			data: [],
		}
	},
	onLoad(query) {
		this.formKey = query.formKey
		this.getData(query.formKey)
	},
	methods: {
		changeTab(row) {
			this.activeTab = row.value
		},
		clickLookup(index) {},
		checkFile(data) {
			console.log('file', data)
			this.$request
				.request('wflow/wflow/doc/table/get-file-url', {
					data: {
						formKey: data._formKey,
						recordIds: data._recordId,
					},
					method: 'post',
				})
				.then((res) => {
					if (res.status === 200) {
						previewFile(res.data)
					}
				})
		},
		filterData() {
			if (!this.activeTab) {
				return this.data
			}
			return this.data
				.filter((item) => {
					return item._status === this.activeTab
				})
				.map((item, index) => {
					return {
						...item,
						_index: index + 1,
					}
				})
		},
		checkOnFile(fileUrl) {
			previewFile(fileUrl)
		},
		getData(key, name) {
			// 获取头
			this.$request
				.request('wflow/wflow/doc/table/get-headers', {
					data: {
						formKey: key,
					},
				})
				.then((res) => {
					if (res.status === 200) {
						const dataList = (res.data || []).map((item) => {
							return {
								name: item.id,
								label: item.name,
							}
						})
						this.headersObjectData = res.data
						this.column = [
							{ name: '_index', label: '序号', width: 80 },
							...dataList,
							{ name: '_submitor', label: '提交人' },
							{
								name: '_submittime',
								label: '提交时间',
								width: 140,
							},
							{ name: '_status', label: '状态', width: 120 },
							{
								name: '_file',
								label: '文件',
								width: 80,
								fixed: true,
								type: 'operation',
								renders: [
									{
										name: '查看',
										type: '',
										class: 'check-file-btn',
										func: 'checkFile', // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
									},
								],
							},
						]
						this.getDetailData()
					}
				})
			// 获取统计
			this.$request
				.request('wflow/wflow/doc/get-stat', {
					data: {
						formKey: key,
					},
				})
				.then((res) => {
					if (res.status === 200) {
						const records = res.data
						this.formName = records.name
						this.submitCount = records.submitCount // 总收集条数
						this.achieveCount = records.achieveCount // 有效数
						this.processingCount = records.processingCount // 确认中数
						this.invalidCount = records.invalidCount // 无效数
						this.invalidingCount = records.invalidingCount // 作废中数
						// this.currentPage3 = page
						// this.dataFormDetailList = this.dataFormDetailList.concat(records)
						// console.log('this.dataFillRecordList', this.dataFormDetailList.length)
					}
				})
		},
		getDetailData() {
			// 获取数据
			// 获取详细数据
			this.myFileData = []
			this.$request
				.request('wflow/wflow/doc/table/get-data', {
					data: {
						formKey: this.formKey,
						page: 1,
						pageSize: 1000, // 设置大一点
					},
					method: 'post',
				})
				.then((res) => {
					if (res.status === 200) {
						const records = res.data.rows
						//console.log('this.headersObjectData',this.headersObjectData)
						records.forEach((item, index) => {
							let tempData = {
								_index: index + 1,
								_recordId: item.recordId,
								_formKey: item.formKey,
							}

							const fillData = item.variableData
							// console.log('this.item',index, fillData)
							const filleDataObject = {}
							this.headersObjectData.forEach((t) => {
								filleDataObject[t.id] = Array.isArray(
									item.variableData[t.id]
								)
									? item.variableData[t.id].join('-')
									: item.variableData[t.id] || '-'
							})
							// console.log('filleDataObject:', filleDataObject)

							//'提交人',
							//'提交时间',
							//'状态',
							//'文件'
							const newtempData = {
								...tempData,
								...filleDataObject,
								_submitor: item.userName,
								_submittime: (item.submitTime || '').split(
									' '
								)[0],
								_status: item.status,
								_file: item.fileUlr,
							}
							this.data.push(newtempData)
							console.log('tempDatatempData', newtempData)
						})
						console.log('this.myFileData', this.data)
					}
				})
		},
	},
}
</script>

<style lang="scss">
.default-button,
.active-button {
	border-radius: 8px;
}
.full-container {
	min-height: 100vh;
	background-color: #fff;
	.backGray {
		background-color: #f5f6f7;
	}
}
.table-cont {
	background-color: rgba(239, 239, 239, 0.62);
	color: rgba(108, 108, 108, 1);
	font-size: 28rpx;
	border: 1px solid rgba(239, 239, 239, 1);
	border-bottom: 0;
	border-right: 0;
	.table-tr {
		padding: 10rpx 8rpx;
		border-right: 1px solid rgba(239, 239, 239, 1);
		border-bottom: 1px solid rgba(239, 239, 239, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.table-tr0 {
		width: 60rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.table-tr1 {
		width: 100rpx;
	}
	.table-tr2 {
		width: 80rpx;
	}
	.table-tr3 {
		width: 100rpx;
	}
	.table-tr4 {
		width: 170rpx;
	}
	.tr-padding {
		padding: 10rpx;
	}
	.table-seal-padding {
		padding: 10rpx 4rpx;
	}
	.table-seal-tr0 {
		width: 60rpx;
	}
	.table-seal-tr1 {
		width: 100rpx;
	}
	.table-seal-tr2 {
		width: 80rpx;
	}
	.table-seal-tr3 {
		width: 100rpx;
	}
	.table-seal-tr4 {
		width: 170rpx;
	}
	.table-seal-tr5 {
		width: 100rpx;
	}
	.table-seal-tr6 {
		width: 100rpx;
	}
	.table-type-tr0 {
		width: 115rpx;
	}
	.table-type-tr1 {
		width: 115rpx;
	}
	.table-type-tr2 {
		width: 70rpx;
	}
	.table-type-tr3 {
		width: 120rpx;
	}
	.table-type-tr4 {
		width: 120rpx;
	}
	.table-type-tr5 {
		width: 85rpx;
	}
	.table-type-tr6 {
		width: 85rpx;
	}
	.table-type-tr-padding {
		padding: 10rpx 0;
	}
}
.table-cont-empty {
	margin-top: -200rpx;
	padding-bottom: 40rpx;
}
.as {
	align-items: stretch;
}
.check {
	color: #3a74fc;
}
.check-file-btn {
	color: #3a74fc !important;
	background-color: transparent !important;
	&::after {
		border: none;
	}
}
</style>
